<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>行情</title>
		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="./cn2017.css">
		<link rel="stylesheet" type="text/css" href="./cwIndexF10.css">
		<link rel="stylesheet" type="text/css" href="./top.css">
		<script src="./jquery.min.js"></script>
		<script src="./pako.js"></script>
		<!--封装了一个发布订阅模式-->
		<script src="./event.js"></script>
		<!--图表库js-->
		<script src="./charting_library/charting_library.min.js"></script>
		<!--websocket-->
		<script src="./websocket.js"></script>
		<!--图表数据获取-->
		<script src="./datafeed.js"></script>
		<!--图表配置-->
		<script src="./chartConfig.js"></script>
		<!-- uni 的 SDK，必须引用。 -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	</head>
	<style>
		* {
  	padding: 0;
  	margin: 0;
  }
  
  body {
  	background-color: #151E25;
  }

  /* 这个下面的css是 产品周期按钮的 */

		.header {
			position: relative;
			height: 10vh; 
		}
		
		.symbol {
			display: flex;
			flex-wrap: wrap;
		}
		.symbol span {
			width: 30%;
			height: 30px;
			margin-right: 3%;
			margin-bottom: 20px;
			line-height: 30px;
			text-align: center;
			background-color: #1f2943;
			color: #d2daed;
			border-radius: 4px;
			font-size: 14px;
		}
		.symbol span.active {
			color: #1f2943;
			font-weight: 500;
			background-color: #d2daed;
		}
		
		.times {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.times span {
			width: 16.66%;
			height: 30px;
			line-height: 30px;
			color: #7c8bac;
			font-size: 16px;
			text-align: center;
		}

		.times span.active {
			position: relative;
			color: #f2f3f5;
			font-weight: 500;
		}

		.times span.active:before {
			content: " ";
			position: absolute;
			bottom: -2px;
			left: 10%;
			z-index: 1;
			width: 80%;
			height: 3px;
			background-color: #f2f3f5;
			border-radius: 3px;
		}
	
/* 	#tv_chart_container:before {
		content: " ";
		position: fixed;
		bottom: 22%;
		left: 5%;
		z-index: 999;
		width: 9vw;
		height: 9vw;
		background-color: #fff;
	} */
  /* 这个下面的css重点关注，和k线图与关 */

  #tv_chart_container {
    width: 100%;
    height: 90vh;
  }

  iframe {
    width: 100%;
    height: 100% !important;
		
  }
	.pane-legend-line.pane-legend-wrap.main.expand-line {
	    padding-right: 5px;
	}
	
	.cu-list {
	    padding: 10px 5px;
	    bottom: 0px;
	    position: fixed;
	    width: 100%;
		display: flex;
		    -webkit-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	.cu-item{
	        padding: 0px 8px;
	        position: relative;
	        display: flex;
	        transition-duration: 0s;
	        -webkit-box-orient: vertical;
	        -webkit-box-direction: normal;
	        flex-direction: column;
	        width: 50%;
	}
	.bt {
	  height: 40px;
	      position: relative;
	      border: 0px;
	      display: inline-flex;
	      -webkit-box-align: center;
	      align-items: center;
	      -webkit-box-pack: center;
	      justify-content: center;
	      box-sizing: border-box;
	      padding: 0 15px;
	      font-size: 14px;
	      line-height: 1;
	      text-align: center;
	      text-decoration: none;
	      overflow: visible;
	      margin-left: initial;
	      transform: translate(0px, 0px);
	      margin-right: initial;
		  border-radius: 5px;
	}
	.green{
		background-color: #2CC599;
		color: #ffffff;
	}
	.red{ 
		background-color: #d14b64;
		color: #ffffff;
	}
	
	.f-up{
		color: #2CC599;
	}
	.f-down{
		color: #d14b64;
	}
</style>
	<body>

		<div class="root">
			<div class="header">
				<!-- <section id="cn_hqdata" class="hq_hqdata">
					<div id="HQBox_Main" class="hqbox-bgred">

						<div id="HQBox_Point" class="hqbox-point">
							<div class="hqbox-point-main">
								<div class="hqbox-point-data">
								 
									<ul class="hqbox-point-more">
										<li class="hqbox-point-moreitem" id="HQBox_Point_price" style="font-size: 36px;margin-top: 8px;">--</li>
										<li class="hqbox-point-moreitem"  style="padding: 16px 0px;">
											<dd>
												<dl style="display: inline;color: grey;font-size: medium;font-weight: 600;" id="now_cny">--</dl>
												<dl style="display: inline;font-weight: 600;font-size: medium;margin-left: 17px;" id="HQBox_Point_change">--</dl>
											</dd>
										</li>
									</ul>
									 
								</div>
								<div class="hqbox-point-special" style="text-align: right;">
									
									<div class="hqbox-point-sbtns"><span style="margin-right: 5px;">高</span> <span id="high"  style="width: 65px;">--</span></div>
									<div class="hqbox-point-sbtns"><span style="margin-right: 5px;">低</span> <span id="low"  style="width: 65px;">--</span></div>
									<div class="hqbox-point-sbtns"><span style="margin-right: 5px;">24H</span> <span id="valum" style="width: 65px;">--</span></div>
									 
								</div>
							</div>
						</div>
						<div id="HQBox_Detail" class="hqbox-detail">
							<ul>
								 


							</ul>
							<div id="kcbAStock"></div>
						</div>

					</div>
				</section> -->


				<div class="times" id="interval">
					<span data-value="1">分时</span>
					<span class="active" data-value="5">5分钟</span>
					<!-- <span data-value="15">15分钟</span> -->
					<span data-value="30">30分钟</span>
					<span data-value="60">1小时</span>
					<span data-value="240">4小时</span>
					<span data-value="1D">日线</span>
				</div>
			</div>
			<div class="chart">
				<div id="tv_chart_container"></div>
			</div>
			<!-- <div class="cu-list">
				<div class="cu-item">
					<button class="bt green" type="button" id="buy">买入</button>
				</div>
				<div class="cu-item">
					<button class="bt red" type="button" id="sale">卖出</button>
				</div>

			</div> -->
		</div>

		<!--页面总统js 初始化图表库 绑定点击事件等-->
		<script src="./index.js"></script>
		<!-- 拦截点击logo跳转 -->
		<script type="text/javascript">
			function plusReady() {
				var ws = plus.webview.currentWebview();
				ws.overrideUrlLoading({
					mode: 'reject'
				}, function(e) {
					console.log('拦截跳转 url: ' + e.url);
				})
			}
			document.addEventListener('plusready', plusReady, false);
			// document.addEventListener('UniAppJSBridgeReady', function() {
			//     uni.getEnv(function(res) {  
			//         if (res.plus) {  
			//             console.log('当前环境为【5+App】');  
			//         } else if (res.miniprogram) {  
			//             console.log('当前环境为【微信小程序】');  
			//         }  
			//     });  
			// });
			document.addEventListener('UniAppJSBridgeReady', function() {
				uni.getEnv(function(res) {
					console.log('当前环境：' + JSON.stringify(res));
				}); 
				// document.querySelector('#buy').addEventListener('click', function(evt) {
				// 	uni.switchTab({
				// 		url: `/pages/trade/main`
				// 	})
				// });
				// document.querySelector('#sale').addEventListener('click', function(evt) {
				// 	uni.switchTab({
				// 		url: `/pages/trade/main`
				// 	})
				// });
				  
				// var info=localStorage.getItem("market");  
				// var market uni.getStorageSync('market');
				// console.log(localStorage.length)
				// console.log(market)
			});
		</script>
	</body>
</html>
